<template>
	<view class="over_page">
		<view class="box">
			<view class="title">竣工图片</view>
			<view class="img_box">
				<image :src="item" v-for="(item,index) in list" :key="index"></image>
			</view>
		</view>
		<view class="btn" @click="show=!show">确认验收</view>
		<u-popup :show="show" mode="center" :round="12" closeOnClickOverlay @close="show=!show">
			<view class="pop_box">
				<view class="top">
					<view class="tips">提示：</view>
					<view class="right">业主确认收货货款将实时到账支付给师傅 费用，请检查是否完成本次订单结束!</view>
				</view>
				<view class="bottom">
					<view @click="show=!show">取消</view>
					<view style="color: #00CC7B;" @click="confirm()">确认验收</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {overImg,confirmOrder} from "../../api/index.js"
    import list from "../../uni_modules/uview-ui/libs/config/props/list.js"
	export default {
		data() {
			return {
				id:'',
				list:[],
				show:false
			}
		},
		onLoad(e) {
			this.id=e.id
		},
		onShow() {
			this.getImg()
		},
		methods: {
			getImg(){
				overImg({order_id:this.id}).then(res=>{
					console.log(res);
					this.list=res.data.img
				})
			},
			confirm(){
				confirmOrder({order_id:this.id}).then(res=>{
					this.show=false
					uni.showToast({
						icon:'success',
						title:'验收成功'
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/order/order'
						})
					},800)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.over_page{
	width: 100%;
	height: 90vh;
	background-color: #F9F9F9;
	padding: 32rpx;
	.box{
		width: 100%;
		height: auto;
		min-height: 268rpx;
		padding: 32rpx 22rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		.title{
			color: #333333;
			font-size: 28rpx;
		}
		.img_box{
			width: 100%;
			height: auto;
			min-height: 200rpx;
			display: grid;
			grid-template-columns: repeat(3,200rpx);
			image{
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
	.btn{
		width: 100%;
		height: 88rpx;
		border-radius: 128rpx;
		background-color: #00CC7B;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		margin-top: 66rpx;
	}
}
.pop_box{
	width: 562rpx;
	height: 272rpx;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	padding: 32rpx;
	.top{
		width: 100%;
		height: 72rpx;
		margin-top: 30rpx;
		display: flex;
		font-size: 24rpx;
		.tips{
			width: 15%;
			height: 72rpx;
			color: #FA5A28;
		}
		.right{
			width: 85%;
			height: 72rpx;
		}
	}
    .bottom{
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		border-top: 2rpx #FAFAFA solid;
		margin-top: 60rpx;
		view{
			width: 50%;
			text-align: center;
		}
	}
}
</style>
